<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    String SSW_app = "dynamicTable1";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  
  <link rel="stylesheet" href="/fm2/themes/1/jquery-ui.css" media="screen" ></link>
  <link rel="stylesheet" href="/fm2/fm2.css" media="screen" ></link>
  <script type="text/javascript" src="/fm2/jquery.js" ></script>
  <script type="text/javascript" src="/fm2/jquery-ui.js" ></script>
  <script type="text/javascript" src="/fm2/jquery-json.js" ></script>
  <script type="text/javascript" src="/fm2/ssw1.js"></script>
  <script type="text/javascript" src="/fm2/menutil.js"></script>

  <script type="text/javascript" src="/<%= SSW_app %>/ssw-dynamic-table-0.0.js"></script>

  <!--   
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  -->
  
  <style>
  #sortable1, #sortable2, #sortable3, #sortable4, #sortable5 {
      list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; 
  }
  #sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li, #sortable5 li {
      margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; 
  }
  .draggable { width: 142px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
  .ui-widget-header p, .ui-widget-content p { margin: 0; }
  #snaptarget { height: 150px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ snap: true });
    $( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
    $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "inner" });
    $( "#draggable4" ).draggable({ grid: [ 20,20 ] });
    $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
  });
  </script>
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>
</head>
<body>
 
<h1>Test</h1>

<div id="2" class="ssw_elementBlock" ></div>

<br style="clear: both;" />
  
<div id="draggable3" class="draggable" style="background-color:yellow;border:solid 1px green;">
  My team
</div>

<div id="1" class="ssw_elementBlock" ></div>

<script>
    tableInitDrag(5,4,".ssw_elementBlock#2");
</script>

<script>
    tableInitSort(5,4,".ssw_elementBlock#1");
</script>

 

 
 
</body>
</html>
